<template>
  <div class="dashboard-container">
    <!-- 背景网格 -->
    <div class="grid-background"></div>
    <!-- 光晕效果 -->
    <div class="glow-circle"></div>

    <!-- 头部信息 -->
    <header class="header-section">
      <div class="header-left">
        <h1>行业可视化大屏系统</h1>
      </div>
      <div class="header-right">
        <div class="current-time">{{ currentTime }}</div>
      </div>
    </header>

    <!-- 主内容区域 - 左中右布局 -->
    <section class="main-layout">
      <!-- 左侧区域 - 2份宽度 -->
      <div class="left-area">
        <!-- 图表1：党组织分布 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h2>党组织分布</h2>
          </div>
          <div ref="orgDistributionChart" class="chart-container"></div>
        </div>

        <!-- 图表2：党员构成分析 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h2>党员构成分析</h2>
          </div>
          <div ref="memberCompositionChart" class="chart-container"></div>
        </div>

        <!-- 图表3：党组织活动统计 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h2>党组织活动统计</h2>
          </div>
          <div ref="orgActivityChart" class="chart-container"></div>
        </div>
      </div>

      <!-- 中间区域 - 3份宽度 -->
      <div class="center-area">
        <!-- 图表4：党建活动成效趋势 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h2>党建活动成效趋势</h2>
          </div>
          <div ref="activityTrendChart" class="chart-container"></div>
        </div>

        <!-- 图表5：党建与生产关联分析 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h2>党建与生产关联分析</h2>
          </div>
          <div ref="partyProductionChart" class="chart-container"></div>
        </div>
      </div>

      <!-- 右侧区域 - 2份宽度 -->
      <div class="right-area">
        <!-- 图表6：生产效能统计 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h2>生产效能统计</h2>
          </div>
          <div ref="productionTrendChart" class="chart-container"></div>
        </div>

        <!-- 图表7：质量指标分析 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h2>质量指标分析</h2>
          </div>
          <div ref="qualityAnalysisChart" class="chart-container"></div>
        </div>

        <!-- 图表8：创新与成本控制 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h2>创新与成本控制</h2>
          </div>
          <div ref="innovationCostChart" class="chart-container"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { useOrgDistributionChart } from './hooks/useOrgDistributionChart.js'
import { useMemberCompositionChart } from './hooks/useMemberCompositionChart.js'
import { useOrgActivityChart } from './hooks/useOrgActivityChart.js'
import { useActivityTrendChart } from './hooks/useActivityTrendChart.js'
import { usePartyProductionChart } from './hooks/usePartyProductionChart.js'
import { useProductionTrendChart } from './hooks/useProductionTrendChart.js'
import { useQualityAnalysisChart } from './hooks/useQualityAnalysisChart.js'
import { useInnovationCostChart } from './hooks/useInnovationCostChart.js'
import {
  getOrgDistributionData,
  getMemberCompositionData,
  getOrgActivityData,
  getActivityTrendData,
  getPartyProductionLinkData,
  getProductionTrendData,
  getQualityAnalysisData,
  getInnovationCostData
} from './api/chartApi';

// 响应式数据
const currentTime = ref('')

// 集中导入所有图表hooks
const { orgDistributionChart, initOrgDistributionChart } = useOrgDistributionChart()
const { memberCompositionChart, initMemberCompositionChart } = useMemberCompositionChart()
const { orgActivityChart, initOrgActivityChart } = useOrgActivityChart()
const { activityTrendChart, initActivityTrendChart } = useActivityTrendChart()
const { partyProductionChart, initPartyProductionChart } = usePartyProductionChart()
const { productionTrendChart, initProductionTrendChart } = useProductionTrendChart()
const { qualityAnalysisChart, initQualityAnalysisChart } = useQualityAnalysisChart()
const { innovationCostChart, initInnovationCostChart } = useInnovationCostChart()

// 更新时间函数
const updateDateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN')
}

// 初始化图表的通用函数
const initChart = (chartRef, option) => {
  if (!chartRef.value) return
  const chart = echarts.init(chartRef.value)
  chart.setOption(option)

  // 添加响应式调整
  window.addEventListener('resize', () => {
    chart.resize()
  })

  return chart
}

// 处理窗口大小变化
const handleResize = async () => {
  // 重新初始化所有图表
  setTimeout(async () => {
    await initCharts()
  }, 100)
}

// 定时器引用，用于清理
let timeInterval = null

// 初始化图表
  const initCharts = async () => {
    try {
      // 使用API调用获取所有数据
      
      // 初始化党组织分布图表
      const orgDistributionResponse = await getOrgDistributionData();
      await initOrgDistributionChart(orgDistributionResponse.data);

      // 初始化党员构成图表
      const memberCompositionResponse = await getMemberCompositionData();
      await initMemberCompositionChart(memberCompositionResponse.data);

      // 初始化党组织活动图表
      const orgActivityResponse = await getOrgActivityData();
      await initOrgActivityChart(orgActivityResponse.data);

      // 初始化党建活动趋势图表
      const activityTrendResponse = await getActivityTrendData();
      await initActivityTrendChart(activityTrendResponse.data);

      // 初始化党建与生产关联图表
      const partyProductionResponse = await getPartyProductionLinkData();
      await initPartyProductionChart(partyProductionResponse.data);

      // 初始化生产效能统计图表
      const productionTrendResponse = await getProductionTrendData();
      await initProductionTrendChart(productionTrendResponse.data);

      // 初始化质量指标分析图表
      const qualityAnalysisResponse = await getQualityAnalysisData();
      await initQualityAnalysisChart(qualityAnalysisResponse.data);

      // 初始化创新与成本控制图表
      const innovationCostResponse = await getInnovationCostData();
      await initInnovationCostChart(innovationCostResponse.data);

    } catch (error) {
      console.error('图表初始化失败:', error)
    }
  }

// 生命周期钩子
onMounted(async () => {
  updateDateTime()
  timeInterval = setInterval(updateDateTime, 1000)

  // 初始化所有图表
  setTimeout(async () => {
    await initCharts()
  }, 100)
})

// 清理定时器，避免内存泄漏
onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #0a192f;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.dashboard-container {
  width: 100%;
  height: 100vh;
  padding: 5px;
  position: relative;
  background: linear-gradient(135deg, #0a192f 0%, #172a45 100%);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 背景网格 */
.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(45, 100, 160, 0.15) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(45, 100, 160, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: -1;
}

/* 光晕效果 */
.glow-circle {
  position: absolute;
  top: 30%;
  right: 20%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 64, 175, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: -2;
  animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.5; }
}

/* 头部样式 */
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(64, 158, 255, 0.3);
  z-index: 10;
  position: relative;
  height: 50px;
}

.header-left h1 {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-time {
  font-size: 13px;
  color: #60a5fa;
  font-weight: 500;
  padding: 4px 8px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(64, 158, 255, 0.3);
}

/* 主布局区域 */
.main-layout {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr;
  gap: 6px;
  flex: 1;
  min-height: 0;
  z-index: 10;
  position: relative;
  height: calc(100vh - 60px);
}

/* 左中右区域 */
.left-area, .center-area, .right-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  height: 100%;
}

/* 图表面板通用样式 */
.chart-panel {
  background: rgba(17, 35, 58, 0.8);
  border: 1px solid rgba(64, 158, 255, 0.3);
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* 左侧3个图表高度均分 */
.left-area .chart-panel {
  flex: 1;
}

/* 中间2个图表高度均分 */
.center-area .chart-panel {
  flex: 1;
}

/* 右侧3个图表高度均分 */
.right-area .chart-panel {
  flex: 1;
}

/* 面板头部样式 */
.panel-header {
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(64, 158, 255, 0.2);
  padding-bottom: 4px;
}

.panel-header h2 {
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
  margin: 0;
}

/* 图表容器样式 */
.chart-container {
  width: 100%;
  flex: 1;
  min-height: 0;
}
</style>